<template>
    <div id="login">
        <div class="container">
            <div class="logo">
                <img src="" alt="logo">
            </div>
            <div class="form">
                <div class="title">
                    <div class="txt">
                        用户登录
                    </div>
                </div>
                <el-form :model="FormData" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="账户" prop="username">
                        <el-input v-model.number="FormData.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pass">
                        <el-input type="password" v-model="FormData.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" v-model="FormData.checkPass" autocomplete="off"></el-input>
                    </el-form-item> -->
                    
                    <el-form-item>
                        <el-button type="primary" round style="width:100%;" @click="submitForm">立即登录</el-button>
                        <!-- <el-button @click="resetForm">重置</el-button> -->
                    </el-form-item>
                </el-form>
                <!-- <div class="tips">
                    还没有账户?去<span class="register" @click="register">注册</span>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                width: "",
                height: "",
                FormData: {
                    username: "",
                    password: "",
                }
            }
        },
        mounted() {
            this.getSize()
        },
        methods: {
            getSize() {
                let dom = document.getElementById("login")
                let data = document.documentElement.clientHeight
                // console.log(data);
                dom.style.height = `${data}px`
            },
            // 提交表单
            async submitForm() {
                let res = await this.$axios.post("/admin/login/login", this.FormData)
                console.log(res);
                let token = res.data.data.token
                if(token) {
                    localStorage.setItem("token", token)
                    this.$router.push("/")
                } else {
                    return false
                }
                
            },
           
        }
    }
</script>

<style lang="scss" scoped>
#login {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: url("../assets/image/bg.jpg") center center no-repeat;
    background-size: 100% 100%;
    padding-top: 10%;
    .container {
        width: 1200px;
        // height: 600px;
        padding: 40px;
        box-sizing: border-box;
       
        border-radius: 30px;
        box-shadow: 0 0 12px #007eff;
        margin: 0 auto;
        background-color: #fff;
        display: flex;
        align-items: center;
        .logo {
            width: 520px;
        }
        .form {
            flex: 1;
            border-left: 1px solid #007eff;
            box-sizing: border-box;
            padding: 30px 60px;
             .title {
                 width: 100%;
                 box-sizing: border-box;
                 padding: 10px 30px;
                 text-align: center;
                 font-size: 30px;
                 
                 color: #007eff;
                 font-weight: bold;
                 .txt {
                    //  border-bottom: 1px solid #007eff;
                     width: 200px;
                     margin: 0 auto;
                     height: 70px;
                     line-height: 70px; 
                 }
             }
             .tips {
                 font-size: 14px;
                 width: 100%;
                 text-align: right;
                 .register {
                     color: #007eff;
                     cursor: pointer;
                 }
             }
        }
    }
}
</style>